// pages/cart/cart.js
// npm install --save miniprogram-computed 
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userstore'
import { 
	reqCartList,reqUdateChecked,reqCheckAllStatus
	,reqAddCart,reqDelCartGoods } from '@/api/cart'
// npm i miniprogram-licia --save 防抖功能，作用：防止同一时间进行多次请求；
// 功能：在某一段时间，只执行最后一次请求；参数（要调用的函数，限制的时间段）；
import { debounce } from 'miniprogram-licia'
// 导入让删除滑块自动弹回的 behavior
import { swipeCellBehavior } from '@/behaviors/swipeCell'

// 导入 miniprogram-computed 提供的 behavior
const computedBehavior = require('miniprogram-computed').behavior

ComponentWithStore({
	// 注册 behaviors
	behaviors : [swipeCellBehavior,computedBehavior],

  // 让页面和 Store 对象建立关联
  storeBindings: {
		store : userStore,
		fields : ['token']
	},

	// 定义计算属性
	computed : {
		// 判断是否是全选，控制全选按钮的选中效果
		// 计算属性会被挂载到 data 对象中
		selectAllStatus (data) {
			// computed 函数不能使用 this 来访问 data 中的数据
			// 如果想访问 data 中的数据，需要使用形参
			// data.cartList.length !== 0 如果是购物车有商品 才进行计算
			return data.cartList.length !== 0 
			// 判断每一个item 中的 isChecked 是否等于 1， 
			// 都等于 1 的话 就会返回 true，否则就返回 false
					&& data.cartList.every(
						(item) => item.isChecked === 1
					)
		},

		// 计算订单总金额
		totalPrice (data) {
			// 用来对订单总额进行累加
			let totalPrice = 0;
			data.cartList.forEach((item) => {
				// 需要判断商品是否是选中的状态，isChecked 是否等于 1
				if(item.isChecked === 1) {
					totalPrice += item.price * item.count
				}
			})
			return totalPrice;
		}
	},

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {

		// 跳转到订单结算页面
		toOrder() {
			// 判断用户是否勾选了商品，如果没有勾选商品，不进行跳转
			if(this.data.totalPrice === 0) {
				wx.toast ({
					title : '请选择需要购买的商品'
				})
				return ;
			}
			wx.navigateTo({
				url: '/modules/orderPayModule/pages/order/detail/detail',
			})
		},

		// 更新购买的数量
		changeBuyNum : debounce(async function (event){
			// event.detail 就是传递过来的数据的值 自定义传递过来的值在 event.target里面

			console.log('更新购物车购买的数量',event)
			// 如果用户输入的购买数量大于 200 ，需要把购买数量设置为 200
			// 最大购买数量是 200，目前购买数量是 1，假设用户输入了 666。666 - 1 = 665，665 + 1 = 666
			// 最大购买数量是 200，如果用户输入的购买数量是 666，重置为 200，200 - 1 = 199，199 + 1 = 200
			const newBuyNum = event.detail > 200 ? 200 : event.detail;
			// 获取商品的 id、索引、之前的购买数量
			const {id,index,oldbuynum} = event.target.dataset; 
			// 使用正则验证用户输入的购买数量，是否是 1-200 之间的正整数
			const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
			// 对用户输入的值进行验证，验证通过 true ，验证失败 false 
			const regRes = reg.test(newBuyNum)
			// 如果验证没有通过，说明用户输入的购买数量不合法或者小于 1，需要还原为之前的购买数量
			if(!regRes){
				this.setData({
					[`cartList[${index}].count`] : oldbuynum
				})
				// 如果验证没有通过，需要阻止代码继续往下运行
				return;
			}

			// 如果验证通过，就需要计算差值，然后把差值发送给公司的服务器，让服务器进行逻辑处理
			const disCount = newBuyNum - oldbuynum;

			// 判断购买数量是否发生了改变，如果购买数量没有发生改变，不发送请求
			if(disCount === 0) return;
			const res = await reqAddCart({goodsId:id,count : disCount});
			console.log('购物车数量是否发生了变化',res)
			// 如果服务 器更新购买数量成功，需要更新本地的购买数量
			if(res.code === 200 ){
				this.setData({
					[`cartList[${index}].count`] : newBuyNum,
					[`cartList[${index}].isChecked`] : 1
				})
			}
		},500),
		
		// 实现全选和全不选效果
		async selectAllStatus (event) {
			// 获取全选按钮的选中状态
			const { detail } = event;
			// 需要将选中的状态转换后接口需要使用的数据
			const isChecked = detail ? 1 : 0;

			// 调用接口，实现全选和全不选功能
			const res = await reqCheckAllStatus(isChecked);
			console.log('全选与全不选按钮',res)
			if (res.code === 200) {
				// this.showTipGetList();

				// 对购物车列表数据进行深拷贝
				const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
				newCartList.forEach((item) => {item.isChecked = isChecked})
				// 对 cartList 进行赋值，驱动视图更新
				this.setData({cartList:newCartList})
			}

		},

		// 更新商品的购买状态 （就是在购物车列表 是否被选中的状态）
		async updateChecked(event) {
			// 获取最新的购买状态
			const { detail } = event;
			// 获取传递的 商品 Id 以及 索引
			const {id,index} = event.target.dataset;
			// 将最新的购买状态转换成后端接需要使用的0和1
			const isChecked = detail ? 1 : 0;

			const res = await reqUdateChecked(id,isChecked)
			if(res.code === 200) {
				// 服务器更新购买状态成功以后，获取最新的购物车列表数据更新状态
				// this.showTipGetList();

				this.setData({
					[`cartList[${index}].isChecked`] : isChecked 
				})
			}
		},

		// 展示文案同时获取购物车列表数据
		async showTipGetList() {
			// 解构数据
			const { token } = this.data;

			// 判断用户是否进行了登录
			if (!token) {
				this.setData({
					emptyDes:'您尚未登录，点击登录获取更多权益',
					cartList : []
				})

				return;
			}

			// 如果用户进行了登录，就需要获取购物车列表数据
			const {code , data:cartList} = await reqCartList();
			console.log('购物车商品列表',cartList)
			if (code === 200) {
				this.setData({
					cartList,
					emptyDes : cartList.length === 0 && '还没有添加商品，快去添加吧~'
				})
			}
		},

		// 删除购物车中的商品
		async delCartGoods (event) {
			// 获取需要删除商品的 id
			const { id } = event.currentTarget.dataset;
			// 询问用户是否删除该商品
			const modelRes = await wx.modal({
				content : '你确认删除该商品吗 ?'
			})
			if(modelRes) {
				await reqDelCartGoods(id)

				this.showTipGetList();
			}
		},

		// 如果使用 Component 方法来构建页面
		// 生命周期钩子函数需要写到 methods 中才可以
		onShow () {
			this.showTipGetList();
		},
		onHide () {
			// 在页面隐藏的时候，需要让删除滑块自动弹回
			this.onSwipeCellCommonClick();
		}

	}
})